<template>
  <el-dialog v-model="visible" title="退款审批" :close-on-click-modal="false">
    <el-descriptions title="订单信息">
      <el-descriptions-item label="商品名称">{{order.orderInfo.prodName}}</el-descriptions-item>
      <el-descriptions-item label="商品金额">{{order.orderInfo.total}}</el-descriptions-item>
      <el-descriptions-item label="总金额">{{order.orderInfo.actualTotal}}</el-descriptions-item>
      <el-descriptions-item label="实际支付金额">{{order.orderInfo.fundDetailed.actualityPayMoney}}</el-descriptions-item>
      <el-descriptions-item label="分销余额抵扣金额">{{order.orderInfo.fundDetailed.distributionBonus}}</el-descriptions-item>
    </el-descriptions>

    <el-table :data="order.orderInfo.refundOrderItem" style="margin-bottom: 45px;">
      <el-table-column label="商品图片" width="180" >
        <template #default="scope">
          <div>
            <img
              alt=""
              :src="resourcesUrl + scope.row.pic"
              style="height:100px;width: 100px;"
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="prodName" label="商品名称" width="180" />
      <el-table-column prop="price" label="商品价格" />
      <el-table-column prop="prodCount" label="购买数量" />
      <el-table-column prop="productTotalAmount" label="购买总金额" />
      <el-table-column prop="alreadyRefundStatistics.actualityPayMoney" label="实际支付金额已退回金额" />
      <el-table-column prop="alreadyRefundStatistics.distributionBonus" label="分销余额抵扣金额已退回金额" />
    </el-table>


    <el-descriptions title="退款申请信息">
      <el-descriptions-item label="退款数量">{{dataForm.goodsNum}}</el-descriptions-item>
      <el-descriptions-item label="退款金额">{{dataForm.refundAmount}}</el-descriptions-item>
      <el-descriptions-item label="申请原因">{{dataForm.buyerMsg}}</el-descriptions-item>
      <el-descriptions-item label="退款类型">
        <el-tag v-if="dataForm.applyType == 1">仅退款</el-tag>
        <el-tag v-else-if="dataForm.applyType == 2">退货退款</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="快递公司">{{dataForm.expressName}}</el-descriptions-item>
      <el-descriptions-item label="快递单号">{{dataForm.expressNo}}</el-descriptions-item>
    </el-descriptions>

    <el-form
      ref="dataFormRef"
      :model="dataForm"
      :rules="dataRule"
      label-width="120px"
      @keyup.enter="onSubmit()"
      style="margin-top: 30px;
    margin-bottom: 30px;"
    >
      <el-form-item label="审批结果" prop="result">
        <el-radio-group v-model="dataForm.result">
          <el-radio :label="0"> 通过 </el-radio>
          <el-radio :label="1"> 驳回 </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="驳回原因" prop="rejectReason" v-if="dataForm.result == 1">
        <el-input
          v-model="dataForm.rejectReason"
          placeholder="驳回原因"
          type="textarea"
          :rows="2"
        />
      </el-form-item>
    </el-form>

    <el-table v-if="dataForm.result == 0" :data="[
    {name:'订单总金额',actualityPayMoney:order.orderInfo.fundDetailed.actualityPayMoney,distributionBonus:order.orderInfo.fundDetailed.distributionBonus,edit:false},
    {name:'订单已退回金额',actualityPayMoney:order.orderInfo.alreadyRefundfundDetailed.actualityPayMoney,distributionBonus:order.orderInfo.alreadyRefundfundDetailed.distributionBonus,edit:false},
    {name:'订单本次退回金额',actualityPayMoney:returnMoney.actualityPayMoney,distributionBonus:returnMoney.distributionBonus,edit:true}
    ]" style="margin-bottom: 45px;">
      <el-table-column prop="name" label="名称" width="180" />
      <el-table-column prop="actualityPayMoney" label="实际支付金额" width="180" >
        <template #default="scope">
           <span v-if="scope.row.edit == false">{{scope.row.actualityPayMoney}}</span>
           <span v-else-if="scope.row.edit == true"> <el-input v-model="returnMoney.actualityPayMoney" :disabled="order.orderInfo.allRefund || defaultCannoEditt"/></span>
        </template>
      </el-table-column>
      <el-table-column prop="distributionBonus" label="分销余额抵扣金额" width="180" >
        <template #default="scope">
           <span v-if="scope.row.edit == false">{{scope.row.distributionBonus}}</span>
           <span v-else-if="scope.row.edit == true"><el-input v-model="returnMoney.distributionBonus" :disabled="order.orderInfo.allRefund || defaultCannoEditt"/></span>
        </template>
      </el-table-column>
    </el-table>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit()">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL;
const emit = defineEmits(["refreshDataList"]);

const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10, // 每页显示多少条
});

const dataForm = ref({
  refundId: "",
  orderId:"",
  orderNumber:"",
  prodCount:0,
  orderAmount:"",
  goodsNum:0,
  refundAmount:0,
  buyerMsg:"",
  applyType:0,
  expressName:"",
  expressNo:"",
  result: 0,
  rejectReason: ""
});

const order = ref({
  orderInfo:{
    refundOrderItem:[],
    fundDetailed:{},
    alreadyRefundfundDetailed:{},
    allRefund:true
  }
});

const returnMoney = ref({
  //与RefundOrderFundTypeDto类保持一致
  actualityPayMoney:0,
  distributionBonus:0
});

//默认是否能修改自动分配的退款金额
const defaultCannoEditt = ref(true);

const dataRule = {
  result: [{ required: true, message: "审批结果 不能为空", trigger: "blur" }],
};
const visible = ref(false);
const dataFormRef = ref(null);
const init = (row) => {
  visible.value = true;
  dataForm.value = row || null;

  if (dataForm.value.orderId && dataForm.value.refundId) {
    http({
      url: http.adornUrl(`/order/refund/refundOrderInfo?orderId=${dataForm.value.orderId}&refundId=${dataForm.value.refundId}`),
      method: "get",
      params: http.adornParams(),
    }).then(({ data }) => {
      order.value.orderInfo=data;

      http({
        url: http.adornUrl(`/order/refund/calculateThisTimeRefundMoneyDistribution?refundId=${dataForm.value.refundId}`),
        method: "get",
        params: http.adornParams(),
      }).then(({ data }) => {
        returnMoney.value.actualityPayMoney=data.actualityPayMoney;
        returnMoney.value.distributionBonus=data.distributionBonus;
      });
    });
  }
};
defineExpose({ init });

const onSubmit = Debounce(() => {
  dataFormRef.value?.validate((valid) => {
    if (valid) {
      //console.log(returnMoney.value);
      http({
        url: http.adornUrl("/order/refund/approval"),
        method: "post",
        data: http.adornData({
          id: dataForm.value.refundId,
          result: dataForm.value.result,
          rejectReason: dataForm.value.rejectReason,
          refundAmount:returnMoney.value
        }),
      }).then(() => {
        ElMessage({
          message: "操作成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            visible.value = false;
            emit("refreshDataList", page);
          },
        });
      });
    }
  });
});
</script>
